<template>
  <el-row class="client-info-box" v-loading="isLoading">
    <el-col :span="12" class="flex-column base-info">
      <el-row style="margin-bottom: 20px">
        <el-col :span="6">
          <title-view title="基本信息" />
        </el-col>
        <el-col :span="18" class="options-button">
          <!-- <el-button style="width:80px" plain type="warning" @click="emit('backList')" :icon="Back">返回</el-button> -->
        </el-col>
      </el-row>
      <div class="flex-overflow base-form-info">
        <el-form ref="ruleBaseFormRef" :model="myClientForm" :rules="myClientData.myClientRules" label-width="100px" status-icon>
          <el-form-item label="客户姓名" prop="customerName">
            <el-input :disabled="isDisable" v-model.trim="myClientForm.customerName" />
          </el-form-item>
          <el-form-item label="电话" prop="mobileCode">
            <el-input :disabled="isDisable" v-model.number="myClientForm.mobileCode" />
          </el-form-item>
          <el-form-item label="装修区域">
            <el-cascader
              ref="cascaderRef"
              v-model="myClientForm.fitmentAreaIds"
              :disabled="isDisable"
              :options="addressData"
              clearable
            />
          </el-form-item>
          <el-form-item label="小区名称">
            <el-input :disabled="isDisable" v-model="myClientForm.residence" />
          </el-form-item>
          <el-form-item label="楼栋号">
            <el-input :disabled="isDisable" v-model="myClientForm.buildingName" />
          </el-form-item>
          <el-form-item label="项目地址">
            <el-input :disabled="isDisable" v-model="myClientForm.address" />
          </el-form-item>
          <el-form-item label="房屋面积">
            <el-input :disabled="isDisable" type="number" v-model.number="myClientForm.area" />
          </el-form-item>
          <el-form-item label="房屋总价等级">
            <el-select :disabled="isDisable" v-model="myClientForm.totalPriceLevel">
              <el-option v-for="item in totalPriceLevels" :key="item.dictCode" :label="item.dictLabel" :value="item.dictCode" />
            </el-select>
          </el-form-item>
          <el-form-item label="客户来源">
            <el-select :disabled="isDisable" v-model="myClientForm.fromType">
              <el-option v-for="item in source_classification" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="细分渠道">
            <el-select :disabled="isDisable" v-model="myClientForm.fromDetailType">
              <el-option
                v-for="item in fromDetails"
                :key="item.dictCode"
                :label="item.dictLabel"
                :value="item.dictCode"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房屋类型">
            <el-select :disabled="isDisable" v-model="myClientForm.houseType">
              <el-option v-for="item in crm_house_types" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="装修用途">
            <el-checkbox-group :disabled="isDisable" v-model="myClientForm.fitment">
              <el-checkbox v-for="item in crm_fitments" :key="item.value" :value="item.label">{{ item.label }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="业务类型">
            <el-select :disabled="isDisable" v-model="myClientForm.businessType">
              <el-option v-for="item in crm_business_type" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="客户预算">
            <el-select :disabled="isDisable" v-model="myClientForm.budget">
              <el-option v-for="item in customerBudgets" :key="item.dictCode" :label="item.dictLabel" :value="item.dictCode" />
            </el-select>
          </el-form-item>
          <el-form-item label="是否期房">
            <el-radio-group :disabled="isDisable" v-model="myClientForm.isFutures">
              <el-radio value="1" size="large">是</el-radio>
              <el-radio value="0" size="large">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              :disabled="isDisable"
              v-model="myClientForm.remark"
              :autosize="{ minRows: 4 }"
              :maxlength="200"
              show-word-limit
              type="textarea"
              placeholder="备注"
            />
          </el-form-item>
        </el-form>
      </div>
    </el-col>
    <el-col :span="12" class="flex-column follow-up-info">
      <el-row style="margin-bottom: 20px">
        <el-col :span="12">
          <title-view title="跟进记录" />
        </el-col>
      </el-row>
      <div class="flex-overflow timeline-container">
        <time-line v-if="crmCustomerTrackList.length" :list="crmCustomerTrackList" />
        <el-empty v-else class="position-center" />
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
import { Back } from "@element-plus/icons-vue";
import addressData from "@/assets/pca-code";
import * as myClientData from "../../config";
import defaultConfig from "@/settings";
import { clientInfoAndFollow } from "@/apis/clientLose";
import { dictList, getBudget } from "@/apis/dict/dict";
import useUserStore from "@/store/modules/user";

const emit = defineEmits(["backList"]);
const props = defineProps({
  customerId: {
    type: String,
    default: ""
  }
});
const { proxy } = getCurrentInstance();
const userStore = useUserStore();

//运营平台字典—— 业务类型、房屋类型、装修用途
const { crm_business_type, crm_house_types, crm_fitments, source_classification } = proxy.$dict(
  defaultConfig.dicts.crm_business_type,
  defaultConfig.dicts.crm_house_types,
  defaultConfig.dicts.crm_fitments,
  defaultConfig.dicts.source_classification
);
// saas租户自定义字典——房屋总价等级
const getDictData = async () => {
  const { data } = await dictList({ dictType: defaultConfig.dicts.HOUSE_PRICE_TYPE });
  totalPriceLevels.value = data || [];
  console.log(data, "<<<房屋总价等级");
};

/**
 * 根据业务类型查询客户预算
 * 根据客户来源查询细分渠道
 */
const customerBudgets = ref([]);
const fromDetails = ref([]);
const getCustomerSource = async () => {
  const postData = {
    dictType: defaultConfig.dicts.COSTEM_PREPRICE,
    dictLabel: myClientForm.value.businessTypeName
  };
  const { data } = await getBudget(postData);
  customerBudgets.value = data || [];
};
const getFromDetailTypes = async () => {
  const postData = {
    dictType: defaultConfig.dicts.COSTEM_ORIGIN,
    dictLabel: myClientForm.value.fromTypeName
  };
  const { data } = await getBudget(postData);
  fromDetails.value = data || [];
};

const fllowUpTypes = ref([]);
// 租户自定义字典——客户跟进类型
const getFllowUpType = async () => {
  const { data = [] } = await dictList({ dictType: defaultConfig.dicts.FOLLER_UP_TYPE });
  console.log(data, "<<<<<跟进类型");
  fllowUpTypes.value = data;
};
/**
 * 详情
 */
const isLoading = ref(false);
const isDisable = ref(true);
const myClientForm = ref({
  ...myClientData.formDataInit,
  crmCustomerTrackList: []
});
const crmCustomerTrackList = ref([]);
const getClientInfoAndFollow = () => {
  isLoading.value = true;
  clientInfoAndFollow(props.customerId)
    .then(res => {
      const { data } = res;
      console.log(data, "<<<<详情");
      myClientForm.value = data;
      myClientForm.value.isFutures = `${data.isFutures}`;
      myClientForm.value.fitment = data.fitment?.split(",") || [];
      myClientForm.value.fitmentName = data.fitment;
      myClientForm.value.fitmentAreaIds = data.fitmentAreaIds?.split(",") || [];
      const crmCustomerTrackListData = data?.crmCustomerTrackList || [];
      crmCustomerTrackList.value = crmCustomerTrackListData.map(item => {
        item.roleName = `${item.roleName}  ${item.updateBy}`;
        fllowUpTypes.value.some(subItem => {
          if (item.trackType === subItem.dictCode) {
            item.trackTypeName = subItem.dictLabel;
            return true;
          }
        });
        return item;
      });
      getCustomerSource();
      getFromDetailTypes();
    })
    .finally(() => {
      isLoading.value = false;
    });
};
const totalPriceLevels = ref([]);
const fromTypes = ref([]);

getFllowUpType();
getDictData();
getClientInfoAndFollow();
</script>

<style scoped lang="scss">
@use "clientInfo";
</style>
